// 创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

// 第二步：创建路由器
const router = createRouter({
  history:createWebHistory(), //路由器的工作模式（稍后讲解）
  routes:[ //一个一个的路由规则
    {
      name:'zhuye',
      path:'/home',
      component:Home
    },
    {
      name:'xinwen',
      path:'/news',
      component:News,
      // 嵌套路由
      children:[
        {
          // 传递params参数时，需要在路由规则中，将params参数占位符，定义为动态参数
          name:'newsDetail',
          path:'detail/:id/:title/:content',
          component:Detail,
          // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
          // props:{a:1,b:'hello'}

          // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
          // props:true

          // props的第三种写法，值为函数
           props(route){
            return {
            id:route.params.id,
            title:route.query.title,
            content:route.query.content
          }
          }

    
        }
      ]
    },
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
    //重定向，将指定路径重新定到另一个路径
    {
      path:'/',
      redirect:'/home'
    }
  ]
})

// 暴露出去router
export default router
